<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>通讯录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script src="../js/flexible_css.js"></script>
<script src="../js/flexible.js"></script>
<link rel="stylesheet" href="../css/index.css">
    <style>
        .empty{ text-align: center; padding: 120px 0; }
    </style>
</head>
<body>

<!-- 右侧|字母列表 -->
<ul id="letters">

</ul>
<!-- 人名单列表 -->
<div class="list-container">
    <dl id="namesList">


  <dd id="lxr" class="bdn lxr">
117位联系人
</dd>

</div>
<!--提示字母框-->
<div class="tip">A</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script  type="text/javascript"  src="../script/jquery-2.1.1.min.js"></script>
 <script  type="text/javascript"  src="../script/jquery.md5.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>

<script type="text/x-dot-template" id="letters_template">
<li class="letter-item">↑</li>
<li class="letter-item">☆</li>
{{~ it  : value : index }}
{{


var p = /[A-Y]/i;
var b = p.test(value.zm);

  if(b){
}}
<li class="letter-item">{{=value.zm}}</li>
{{
}

}}
	{{~}}
    <li class="letter-item">Z</li>
  <li class="letter-item">#</li>
</script>

<script type="text/x-dot-template" id="category_template2">
{{~ it  : value : index }}
<dd>
<div class="fl tx">
<img src='../image/default1.png'  srcs="{{= value.thumb }}"  class="imgCache"   >
</div>
<div class="fl wxm"  >{{=value.title}}</div>
</dd>
	{{~}}


</script>

<script type="text/x-dot-template" id="category_template">
<dd>
<div class="fl tx">
<img src="../image/xdpy.png" >
</div>
<div class="fl wxm"  >新的朋友</div>
</dd>

      <dd>
<div class="fl tx">
<img src="../image/ql.png" >
</div>
<div class="fl wxm"  >群聊</div>
</dd>

            <dd>
<div class="fl tx">
<img src="../image/biaoqian.png" >
</div>
<div class="fl wxm"  >标签</div>
</dd>


<dd class="bdn">
<div class="fl tx ">
<img src="../image/gzh.png" >
</div>
<div class="fl wxm"  >公众号</div>
</dd>
{{

  tmp="";
}}
{{~ it  : value : index }}
{{


   if(tmp==value.zm){

}else{
  tmp=value.zm;

}}




<dt id='{{=tmp}}'>{{=tmp}}</dt>
{{

}
}}


<dd>
<div class="fl tx">
<img src='../image/default1.png'  srcs="{{= value.thumb }}"  class="imgCache"   >
</div>
<div class="fl wxm"  >{{=value.title}}</div>
</dd>


	{{~}}



</script>
<script type="text/javascript">
    apiready = function(){


      api.ajax({
   url:localStorage.getItem('domain') +"/Home/index/txl",
  method: 'get',

      },function(ret,err){


  console.log( localStorage.getItem('domain') +"/Home/index/txl" );

        var letters = $api.byId('letters');
         var letters_template = $api.byId('letters_template');
        pagefn = doT.template(letters_template.text);
          letters.innerHTML = pagefn(ret.zm);


          var category = $api.byId('namesList');
           var category_template = $api.byId('category_template');

          pagefn = doT.template(category_template.text);
            category.innerHTML = pagefn(ret.user);
             if(ret.user2.length>0){

           pagefn2 = doT.template(category_template2.text);
                  $api.append(category,   "<dt id='#'>#</dt>");
                    $api.append(category,  pagefn2(ret.user2));
             }

_zyzImgCache()


  $api.append(category, '<dd id="lxr" class="bdn lxr">'+ret.num+"位联系人"+'</dd>' );




              tipDom = document.querySelector(".tip")
            // 获取右侧字母DOM
              letterDom = document.querySelector("#letters")

            // 右侧字母触摸判断逻辑
            letterDom.addEventListener('touchmove', function (e) {
                e.preventDefault()
                //坐标（获取当前触控点的坐标）
                  y = e.touches[0].clientY
                  x = e.touches[0].clientX
                //根据当前纵向坐标控制内容的位置
                  MaxL = letterDom.getBoundingClientRect().left;
                  MaxR = letterDom.getBoundingClientRect().right;
                  MaxT = letterDom.getBoundingClientRect().top
                  MaxB = letterDom.getBoundingClientRect().top + letterDom.getBoundingClientRect().height;
                // 判断是否从一个字母到另一个字母
                if ((x >= MaxL && x <= MaxR) && (y >= MaxT && y <= MaxB) && x && y) {
                      ele = document.elementFromPoint(x, y)
                      eleContent = ele.innerHTML
                    clickLetter(eleContent)
                    tipDom.innerHTML = eleContent
                    tipDom.style.display = 'block'

                    letterDom.style.color = "#fff"
                }
                letterDom.removeEventListener("touchend", this, false)
            })

            letterDom.addEventListener("touchend", function (e) {
                tipDom.style.display = "none"
                letterDom.style.background = ""
                letterDom.style.color = "#B2B2B2"
                letterDom.removeEventListener("touchmove", this, false)
            })

              letterDoms = document.querySelectorAll('#letters>.letter-item')

            for (  i = 0; i < letterDoms.length; i++) {
                  letterDom = letterDoms[i];
                  letterTmp = letterDom.innerHTML
               letterDom.addEventListener('click',function () {

                   clickLetter(letterTmp)
               })
            }

      })

    }
  </script>


  <script>


      // 右侧字母点击事件
      function clickLetter(letter) {
            tmpLetter = letter
            element = window.document.getElementById(tmpLetter)
          element.scrollIntoView()
      }

  </script>
</html>
